<template>
	<view class="container">
		<Navigator2 :title="$t('device.renewSubscription')" :fontcolor="'#FFFFFF'" :bgcolor="'#25293C'" menuIcon="/static/leftcursor_white.png" menuIconWidth="20px" menuIconHeight="20px"></Navigator2>
		
		<!-- 标题区域 -->
		<view class="title-section">
			<view class="main-title">{{ $t('device.continueUsingAllAdvancedFeatures') }}</view>
			<view class="sub-title">{{ $t('device.subscribeYourAIserviceToEnjoyIntelligentExperience') }}</view>
		</view>
		
		<!-- 主要内容 -->
		<view class="content">
			<!-- 订阅套餐卡片 -->
			<view class="plans-grid">
				<view class="plan-card" :class="{'selected': selectedPlan === '1year'}" @tap="selectPlan('1year')">
					<view class="plan-info-row">
						<view class="plan-period">{{ $t('device.1yearSubscription') }}</view>
						<view class="plan-price-info">{{ $t('device.99Year') }}</view>
					</view>
					<view class="plan-price-row">
						<view class="plan-price">¥9.9</view>
						<view class="plan-original">¥19.9</view>
					</view>
				</view>
				
				<view class="plan-card" :class="{'selected': selectedPlan === '2year'}" @tap="selectPlan('2year')">
					<view class="plan-info-row">
						<view class="plan-period">{{ $t('device.2yearSubscription') }}</view>
						<view class="plan-price-info">{{ $t('device.89Year') }}</view>
					</view>
					<view class="plan-price-row">
						<view class="plan-price">¥17.8</view>
						<view class="plan-original">¥39.8</view>
					</view>
				</view>
				
				<view class="plan-card" :class="{'selected': selectedPlan === '3year'}" @tap="selectPlan('3year')">
					<view class="plan-info-row">
						<view class="plan-period">{{ $t('device.3yearSubscription') }}</view>
						<view class="plan-price-info">{{ $t('device.79Year') }}</view>
					</view>
					<view class="plan-price-row">
						<view class="plan-price">¥23.7</view>
						<view class="plan-original">¥59.7</view>
					</view>
				</view>
				
				<view class="plan-card plan-lifetime" :class="{'selected': selectedPlan === 'lifetime'}" @tap="selectPlan('lifetime')">
					<view class="plan-info-row">
						<view class="plan-period">{{ $t('device.lifetimeSubscription') }}</view>
						<view class="plan-price-info">{{ $t('device.oneTimePayment') }}</view>
					</view>
					<view class="plan-price-row">
						<view class="plan-price">¥99.0</view>
						<view class="plan-original">¥199</view>
					</view>
					<view class="plan-badge">{{ $t('device.most划算') }}</view>
				</view>
			</view>
			
			<!-- 会员权益 -->
			<view class="benefits-section">
				<view class="benefits-title">{{ $t('device.memberBenefits') }}</view>
				
				<view class="benefit-item">
					<view class="benefit-icon">
						<image src="/static/renew_dialog.png" mode="aspectFit"></image>
					</view>
					<view class="benefit-content">
						<view class="benefit-title">{{ $t('device.infiniteDialog') }}</view>
						<view class="benefit-desc">{{ $t('device.unlimitedCommunicationWithAI') }}</view>
					</view>
				</view>
				
				<view class="benefit-item">
					<view class="benefit-icon lighting-icon">
						<image src="/static/renew_lighting.png" mode="aspectFit"></image>
					</view>
					<view class="benefit-content">
						<view class="benefit-title">{{ $t('device.advancedFeatures') }}</view>
						<view class="benefit-desc">{{ $t('device.unlockAllProfessionalAIAbilities') }}</view>
					</view>
				</view>
				
				<view class="benefit-item">
					<view class="benefit-icon">
						<image src="/static/renew_rocket.png" mode="aspectFit"></image>
					</view>
					<view class="benefit-content">
						<view class="benefit-title">{{ $t('device.quickResponse') }}</view>
						<view class="benefit-desc">{{ $t('device.prioritizeAIConversationRequests') }}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 底部订阅按钮 -->
		<view class="subscribe-footer">
			<!-- 续费提示 -->
			<view class="renew-notice">
				{{renewNoticeText}}
			</view>
			<!-- 间隔符 -->
			<view class="divider"></view>
			<button class="subscribe-btn" @tap="subscribe">{{subscribeButtonText}}</button>
		</view>
	</view>
</template>

<script>
	import api from '@/js/api.js'
	import Navigator2 from '@/components/Navigator2.vue'
	export default {
		data() {
			return {
				selectedPlan: '1year',
				planTypeMap: {
					'1year': 1,
					'2year': 2,
					'3year': 3,
					'lifetime': 4
				},
				planAmountMap: {
					'1year': 9.9,
					'2year': 17.8,
					'3year': 23.7,
					'lifetime': 99.0
				}
			}
		},
		computed: {
			renewNoticeText() {
				const notices = {
					'1year': this.$t('device.renewalOfEffectivePeriod延长1年'),
					'2year': this.$t('device.renewalOfEffectivePeriod延长2年'),
					'3year': this.$t('device.renewalOfEffectivePeriod延长3年'),
					'lifetime': this.$t('device.oneTimePayment,LifetimeUse')
				}
				return notices[this.selectedPlan] || this.$t('device.renewalOfEffectivePeriod延长1年')
			},
			subscribeButtonText() {
				const prices = {
					'1year': this.$t('device.immediatelySubscribe') + ' ¥9.9',
					'2year': this.$t('device.immediatelySubscribe') + ' ¥17.8',
					'3year': this.$t('device.immediatelySubscribe') + ' ¥23.7',
					'lifetime': this.$t('device.immediatelySubscribe') + ' ¥99.0'
				}
				return prices[this.selectedPlan] || this.$t('device.immediatelySubscribe') + ' ¥9.9'
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			selectPlan(plan) {
				this.selectedPlan = plan
			},
			subscribe() {
				const userInfo = uni.getStorageSync('userInfo')
				api.createSubscribeOrder(this.deviceId, userInfo.id, this.planAmountMap[this.selectedPlan], this.planTypeMap[this.selectedPlan]).then(res => {
					console.log('createSubscribeOrder res:', res)

					uni.navigateTo({
						url: '/pages/device/orderpay?orderId=' + res.data.id + '&business=renew' + '&createTime=' + res.data.createTime
					})
				})
				
				
			}
		},
		components: {
			Navigator2
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #25293C;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 88rpx;
	padding-top: 88rpx;
	color: white;
	
	.navbar-left {
		position: absolute;
		left: 30rpx;
		top: 88rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		
		.back-icon {
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.navbar-title {
		font-size: 36rpx;
		font-weight: 600;
	}
}

.content {
	padding: 30rpx 30rpx 140rpx;
	background-color: #FFFFFF;
	border-radius: 16px 16px 0 0;
}

.title-section {
	text-align: center;
	margin-bottom: 40rpx;
	padding-top: 20px;
	
	.main-title {
		font-size: 48rpx;
		font-weight: 700;
		color: white;
		margin-bottom: 20rpx;
	}
	
	.sub-title {
		font-size: 28rpx;
		color: #FFFFFF;
	}
}

.plans-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20rpx;
	margin-bottom: 50rpx;
	background-color: #FFFFFF;
}

.plan-card {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 30rpx;
	position: relative;
	border: 1px solid #EBEFF4;
	box-sizing: border-box;
	transition: all 0.3s ease;
	
	&.selected {
		border-color: #FD5B4B;
		background-color: #FFF5E8;
		
		.plan-price {
			color: #AD3802;
		}
	}
	
	&.plan-lifetime {
		.plan-badge {
			position: absolute;
			top: 142rpx;
			right: 0rpx;
			background: #FF6B35;
			color: white;
			font-size: 20rpx;
			padding: 8rpx 16rpx;
			border-radius: 20rpx 0 20rpx 0;
		}
	}
	
	.plan-info-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.plan-price-row {
		display: flex;
		align-items: baseline;
	}
	
	.plan-period {
		font-size: 28rpx;
		font-weight: 600;
		color: #111827;
		margin-bottom: 6px;
	}
	
	.plan-price-info {
		font-size: 24rpx;
		color: #999;
	}
	
	.plan-price {
		font-size: 48rpx;
		font-weight: bold;
		color: #14161A;
		margin-right: 6px;
	}
	
	.plan-original {
		font-size: 24rpx;
		color: #6B7280;
		text-decoration: line-through;
	}
}

.benefits-section {
	margin-bottom: 60rpx;
	
	.benefits-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #111827;
		margin-bottom: 16rpx;
	}
}

.benefit-item {
	display: flex;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #EBEFF4;
	
	.benefit-icon {
		width: 80rpx;
		height: 80rpx;
		background: #3C4857;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		flex-shrink: 0;
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		&.lighting-icon image {
			width: 15px;
			height: 15px;
		}
	}
	
	.benefit-content {
		flex: 1;
		
		.benefit-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.benefit-desc {
			font-size: 26rpx;
			color: #666;
		}
	}
}

.renew-notice {
	text-align: center;
	font-size: 28rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.divider {
	width: 100vw;
	height: 1rpx;
	background: #F5F5F5;
	margin: 0 -30rpx 30rpx -30rpx;
}

.subscribe-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
	background: white;
	
	.subscribe-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 88rpx;
		background: #24293E;
		border-radius: 0px;
		color: white;
		border: none;
		font-size: 32rpx;
		
		&:active {
			background: #2A3441;
		}
	}
}
</style>